﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Access-Control-Allow-Origin" content="*" />
	<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="js/jquery.js"></script>
	<title>到店支付二维码</title>
	<style>
		body{
			height: 100%;
			margin:0;
			padding:0;
		}
		#main {
			display:flex;
		}
		#main canvas {width:100%;height:100%;}
		.loader {
			background: #000;
			background: radial-gradient(#222, #000);
			bottom: 0;
			left: 0;
			overflow: hidden;
			position: fixed;
			right: 0;
			top: 0;
			z-index: 99999;
		}
		.loader .loader-tip{
			color:#aaa;
			text-align:center;
			position: absolute;
			width: 100%;
			top:100px;
		}

		.loader-inner {
			bottom: 0;
			height: 60px;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			top: 0;
			width: 100px;
		}

		.loader-line-wrap {
			animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
			box-sizing: border-box;
			height: 50px;
			left: 0;
			overflow: hidden;
			position: absolute;
			top: 0;
			transform-origin: 50% 100%;
			width: 100px;
		}
		.loader-line {
			border: 4px solid transparent;
			border-radius: 100%;
			box-sizing: border-box;
			height: 100px;
			left: 0;
			margin: 0 auto;
			position: absolute;
			right: 0;
			top: 0;
			width: 100px;
		}
		.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
		.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
		.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
		.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
		.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

		.loader-line-wrap:nth-child(1) .loader-line {
			border-color: hsl(0, 80%, 60%);
			height: 90px;
			width: 90px;
			top: 7px;
		}
		.loader-line-wrap:nth-child(2) .loader-line {
			border-color: hsl(60, 80%, 60%);
			height: 76px;
			width: 76px;
			top: 14px;
		}
		.loader-line-wrap:nth-child(3) .loader-line {
			border-color: hsl(120, 80%, 60%);
			height: 62px;
			width: 62px;
			top: 21px;
		}
		.loader-line-wrap:nth-child(4) .loader-line {
			border-color: hsl(180, 80%, 60%);
			height: 48px;
			width: 48px;
			top: 28px;
		}
		.loader-line-wrap:nth-child(5) .loader-line {
			border-color: hsl(240, 80%, 60%);
			height: 34px;
			width: 34px;
			top: 35px;
		}

		@keyframes spin {
			0%, 15% {
				transform: rotate(0);
			}
			100% {
				transform: rotate(360deg);
			}
		}
	</style>
</head>

<body>
	<div id="main"><canvas id="myCanvas" width="1080" height="1260">当前浏览器版本过低，请使用其他浏览器尝试</canvas></div>
	<div class="loader">
		<div class="loader-tip">正在生成到店支付二维码</div>
		<div class="loader-inner">
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
			<div class="loader-line-wrap">
				<div class="loader-line"></div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
        //防止token变更
        document.cookie.split(" ").join("").split(";").forEach(function(cookie){
            if(cookie.indexOf("token")==0){
                let hostname = window.location.hostname.substring(window.location.hostname.indexOf("."));
                let token = cookie.split("=")[1];
                let fn = function(){
                    document.cookie = "token="+ escape (token) + ";domain="+hostname+";path=/";
                };
                document.addEventListener("mousedown",fn);
                document.addEventListener("touchstart",fn);
                document.addEventListener("click",fn);
            }
        });
		var apiHost = "https://"+window.location.hostname+"/plugin/api";
		function GetQueryString(name) {
			 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			 var r = window.location.search.substr(1).match(reg);
			 if(r!=null)return  unescape(r[2]); return null;
		}
		var drawing = false,loader;
		var qrImage = new Image(),appName,accountName,rate=0;
		var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext("2d");
		$.ajaxSetup({crossDomain: true, xhrFields: {withCredentials: true}});
		qrImage.name = "二维码图片";
		function createImage() {
			if(loader>0 || drawing) return;	//所有信息都载入完成再生成海报
			drawing = true;
			//画背景
			ctx.rect(0 , 0 , canvas.width , canvas.height);
			ctx.fillStyle = "#fff";
			ctx.fill();
			
			var top = 80, length = 80,padding = 50;
			//店铺名称
			ctx.fillStyle = "#333";
			ctx.textAlign = 'center';//设置文本的水平对齐方式
			ctx.textBaseline = 'middle'; //设置文本的垂直对齐方式
			ctx.font="80px Verdana";
			ctx.fillText(appName, canvas.width /2 , top, canvas.width - 60);
			
			var dWidth = canvas.width - 200;
			top = 180;
			ctx.drawImage(qrImage,0,0,qrImage.width,qrImage.height,(canvas.width-dWidth)/2, top, dWidth,dWidth);
			
			ctx.strokeStyle = "#f00";
			ctx.lineWidth = 3; //设置线宽
			ctx.beginPath();
			ctx.moveTo(padding, top);
			ctx.lineTo(padding, top + length);
			ctx.moveTo(padding, top);
			ctx.lineTo(padding+length, top);
			ctx.moveTo(canvas.width - padding , top);
			ctx.lineTo(canvas.width - padding, top + length);
			ctx.moveTo(canvas.width - padding , top);
			ctx.lineTo(canvas.width - padding - length , top);
			ctx.moveTo(padding, top + dWidth);
			ctx.lineTo(padding, top + dWidth - length);
			ctx.moveTo(padding, top + dWidth);
			ctx.lineTo(padding + length, top + dWidth);
			ctx.moveTo(canvas.width - padding, top + dWidth);
			ctx.lineTo(canvas.width - padding, top + dWidth - length);
			ctx.moveTo(canvas.width - padding, top + dWidth);
			ctx.lineTo(canvas.width - 2 - length, top + dWidth);
			ctx.stroke();
			ctx.closePath();
			
			top += dWidth + 100;
			ctx.textAlign = 'center';//设置文本的水平对齐方式
			ctx.fillStyle = "#f00";
			ctx.font="60px Verdana";
			ctx.fillText("扫码付款，更多惊喜等你来拿", canvas.width / 2 , top , canvas.width - 50);
			
			/*//TODO START
			$('.loader').fadeOut();
			drawing = false;
			return;
			//TODO END*/
			
			//预览图片
			var code = canvas.toDataURL("image/jpeg",0.8);
			var parts = code.split(';base64,');
			$.ajax({
				url:apiHost+"/image.base64.to.png",
				type:"POST",
				data:parts[1],
				contentType:"text/plain",
				success: function(res){
					var open = function(){
						$.ajax({
							url:apiHost+"/wx.app.call?name=previewImage",
							type:"POST",
							data:JSON.stringify({current:res,urls:[res]}),
							contentType:"application/json; charset=utf-8",
							dataType:"json",
							complete: function(){
								$('.loader').fadeOut();
								drawing = false;
							},
						});
					}
					open();
					$("#main").click(open);
				},
			});
		}
		function base64Decode(input) {  
			var output = "";  
			var chr1, chr2, chr3;  
			var enc1, enc2, enc3, enc4;  
			var i = 0;  
			input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");  
			while (i < input.length) {  
				enc1 = _keyStr.indexOf(input.charAt(i++));  
				enc2 = _keyStr.indexOf(input.charAt(i++));  
				enc3 = _keyStr.indexOf(input.charAt(i++));  
				enc4 = _keyStr.indexOf(input.charAt(i++));  
				chr1 = (enc1 << 2) | (enc2 >> 4);  
				chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);  
				chr3 = ((enc3 & 3) << 6) | enc4;  
				output = output + String.fromCharCode(chr1);  
				if (enc3 != 64) {  
					output = output + String.fromCharCode(chr2);  
				}  
				if (enc4 != 64) {  
					output = output + String.fromCharCode(chr3);  
				}  
			}  
			output = _utf8_decode(output);  
			return output;  
		}
		function base64Encode(str) {
			var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
			var out = "", i = 0, len = str.length, c1, c2, c3;
			while (i < len) {
				c1 = str.charCodeAt(i++) & 0xff;
				if (i == len) {
					out += CHARS.charAt(c1 >> 2);
					out += CHARS.charAt((c1 & 0x3) << 4);
					out += "==";
					break;
				}
				c2 = str.charCodeAt(i++);
				if (i == len) {
					out += CHARS.charAt(c1 >> 2);
					out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
					out += CHARS.charAt((c2 & 0xF) << 2);
					out += "=";
					break;
				}
				c3 = str.charCodeAt(i++);
				out += CHARS.charAt(c1 >> 2);
				out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
				out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
				out += CHARS.charAt(c3 & 0x3F);
			}
			return out;
		}
		function LoadSuccess() {
			loader--;
			createImage();
		}
		function LoadFail(msg) {
			var html = $('.loader-tip').html();
			$('.loader-tip').html('载入' + (!msg?this.name:msg) + '失败');
		}
		function ImageLoader(img,src) {
			img.setAttribute("crossOrigin",'Anonymous');
			img.onload = LoadSuccess;
			img.onerror = LoadFail;
			img.src = src;
		}

		var app_id = GetQueryString("app_id");
		function start() {
			loader = 2;
			//店铺名称
			$.get(apiHost+"/app.get?app_id="+app_id).done(function(res){
				appName = res.result.app_name;
				LoadSuccess();
			}).fail(function(){LoadFail('店铺信息')});
			
			var conf = {action:'openPlugin',pluginId:'storepay',uri:'index.html'};
			$.ajax({
				url:apiHost+'/wx.app.qrcode.shop.launch?app_id='+app_id+'&width=300',
				type:"POST",
				data:{scene:JSON.stringify(conf)},
				xhrFields: {
					withCredentials: true
				},
				mimeType: "text/plain; charset=x-user-defined"
			}).done(function(res) {
				qrImage.setAttribute("crossOrigin",'Anonymous');
				qrImage.onload = LoadSuccess;
				qrImage.onerror = LoadFail;
				qrImage.src = 'data:image/png;base64,'+base64Encode(res);
			}).fail(function(){
				LoadFail('二维码信息');
			});
		}
		start();
		/*
		loader = 2;
		appName = "测试店铺123";
		LoadSuccess();
		qrImage.onload = LoadSuccess;
		qrImage.onerror = LoadFail;
		qrImage.src = "images/qr.png";
		*/
	</script>
</body>

</html>